<template>
  <div class="login_container"  :class="'bg'">
    <div class="login_box">
      <!-- 登录表单区域 -->
      <el-form size="mini">
        <h3 style="text-align: center">登陆界面</h3>
        <!-- 用户名 -->
        <h6 style="margin: 0 0 2px 0;color: red">{{title}}</h6>
        <el-form-item>
          <el-input placeholder="用户名" v-model="name"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item>
          <el-input placeholder="密码" v-model="password" show-password></el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      name: '',
      password: '',
      title: ''
    }
  },
  methods: {
    login () {
      var ses = window.sessionStorage
      var d = this.name
      if (this.name === '123' && this.password === '123') {
        ses.setItem('user', d)
        this.$router.push({name: 'Doctor'})
      } else if (this.name === '' || this.password === '') {
        this.title = '用 户 名 密 码 不 能 为 空'
      } else {
        this.title = '用户名或密码错误'
      }
      if (this.name === '1234' && this.password === '1234') {
        ses.setItem('user', d)
        this.$router.push({name: 'backstage'})
      } else if (this.name === '' || this.password === '') {
        this.title = '用 户 名 密 码 不 能 为 空'
      } else {
        this.title = '用户名或密码错误'
      }
    }
  }
}
</script>
<style scoped>
.login_container {
  background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
  /*background-image: url("../images/bg_login.png");*/
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
.login_box {
  width: 300px;
  height: 270px;
  /* background-color: #fff; */
  background-color: #2e527bb3;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}
.el-form {
  padding: 32px;
  position: absolute;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}
.el-button {
  width: 100%;
}
.code {
  width: 45%;
}
.rememberMe {
  color: #fff;
}
.bg {
  background-image: url("../../assets/login_bg.jpeg");
  height: 100vh;
  width: 100%;
  position: absolute;
}
</style>
